From 28d6d13844db28745bc2813e87a367131f862070 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 19 Jul 2021 20:59:11 +0200
Subject: refactor(ui): Move page components in separate files

---
 .../src/pages/projects/[project]/index.js          | 60 +-------------
 .../projects/[project]/portfolios/[portfolio].js   | 93 +---------------------
 .../projects/[project]/topologies/[topology].js    | 53 ++----------
 3 files changed, 11 insertions(+), 195 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/pages/projects/[project]')

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
index 8b0ed8e0..5c17303f 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
@@ -21,23 +21,13 @@
  */
 
 import { useRouter } from 'next/router'
+import ProjectOverview from '../../../components/projects/ProjectOverview'
 import { useProject } from '../../../data/project'
 import { AppPage } from '../../../components/AppPage'
 import Head from 'next/head'
 import {
     Breadcrumb,
     BreadcrumbItem,
-    Card,
-    CardActions,
-    CardBody,
-    CardHeader,
-    CardTitle,
-    DescriptionList,
-    DescriptionListDescription,
-    DescriptionListGroup,
-    DescriptionListTerm,
-    Grid,
-    GridItem,
     PageSection,
     PageSectionVariants,
     Skeleton,
@@ -45,10 +35,6 @@ import {
     TextContent,
 } from '@patternfly/react-core'
 import BreadcrumbLink from '../../../components/util/BreadcrumbLink'
-import PortfolioTable from '../../../components/projects/PortfolioTable'
-import TopologyTable from '../../../components/projects/TopologyTable'
-import NewTopology from '../../../components/projects/NewTopology'
-import NewPortfolio from '../../../components/projects/NewPortfolio'
 
 function Project() {
     const router = useRouter()
@@ -80,49 +66,7 @@ function Project() {
                 </TextContent>
             </PageSection>
             <PageSection isFilled>
-                <Grid hasGutter>
-                    <GridItem md={2}>
-                        <Card>
-                            <CardTitle>Details</CardTitle>
-                            <CardBody>
-                                <DescriptionList>
-                                    <DescriptionListGroup>
-                                        <DescriptionListTerm>Name</DescriptionListTerm>
-                                        <DescriptionListDescription>
-                                            {project?.name ?? <Skeleton screenreaderText="Loading project" />}
-                                        </DescriptionListDescription>
-                                    </DescriptionListGroup>
-                                </DescriptionList>
-                            </CardBody>
-                        </Card>
-                    </GridItem>
-                    <GridItem md={5}>
-                        <Card>
-                            <CardHeader>
-                                <CardActions>
-                                    <NewTopology projectId={projectId} />
-                                </CardActions>
-                                <CardTitle>Topologies</CardTitle>
-                            </CardHeader>
-                            <CardBody>
-                                <TopologyTable projectId={projectId} />
-                            </CardBody>
-                        </Card>
-                    </GridItem>
-                    <GridItem md={5}>
-                        <Card>
-                            <CardHeader>
-                                <CardActions>
-                                    <NewPortfolio projectId={projectId} />
-                                </CardActions>
-                                <CardTitle>Portfolios</CardTitle>
-                            </CardHeader>
-                            <CardBody>
-                                <PortfolioTable projectId={projectId} />
-                            </CardBody>
-                        </Card>
-                    </GridItem>
-                </Grid>
+                <ProjectOverview projectId={projectId} />
             </PageSection>
         </AppPage>
     )
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
index 53cc9c73..28b03c37 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
@@ -23,27 +23,12 @@
 import { useRouter } from 'next/router'
 import Head from 'next/head'
 import React, { useRef } from 'react'
-import { usePortfolio, useProject } from '../../../../data/project'
 import {
     Breadcrumb,
     BreadcrumbItem,
-    Card,
-    CardActions,
-    CardBody,
-    CardHeader,
-    CardTitle,
-    Chip,
-    ChipGroup,
-    DescriptionList,
-    DescriptionListDescription,
-    DescriptionListGroup,
-    DescriptionListTerm,
     Divider,
-    Grid,
-    GridItem,
     PageSection,
     PageSectionVariants,
-    Skeleton,
     Tab,
     TabContent,
     Tabs,
@@ -53,10 +38,8 @@ import {
 } from '@patternfly/react-core'
 import { AppPage } from '../../../../components/AppPage'
 import BreadcrumbLink from '../../../../components/util/BreadcrumbLink'
-import { METRIC_NAMES } from '../../../../util/available-metrics'
-import NewScenario from '../../../../components/portfolios/NewScenario'
-import ScenarioTable from '../../../../components/portfolios/ScenarioTable'
-import PortfolioResults from '../../../../components/portfolios/results/PortfolioResults'
+import PortfolioOverview from '../../../../components/portfolios/PortfolioOverview'
+import PortfolioResults from '../../../../components/portfolios/PortfolioResults'
 
 /**
  * Page that displays the results in a portfolio.
@@ -65,9 +48,6 @@ function Portfolio() {
     const router = useRouter()
     const { project: projectId, portfolio: portfolioId } = router.query
 
-    const { data: project } = useProject(projectId)
-    const { data: portfolio } = usePortfolio(portfolioId)
-
     const overviewRef = useRef(null)
     const resultsRef = useRef(null)
 
@@ -88,7 +68,7 @@ function Portfolio() {
     return (
         <AppPage breadcrumb={breadcrumb}>
             <Head>
-                <title>{project?.name ?? 'Portfolios'} - OpenDC</title>
+                <title>Portfolio - OpenDC</title>
             </Head>
             <PageSection variant={PageSectionVariants.light}>
                 <TextContent>
@@ -114,72 +94,7 @@ function Portfolio() {
             </PageSection>
             <PageSection isFilled>
                 <TabContent eventKey={0} id="overview" ref={overviewRef} aria-label="Overview tab">
-                    <Grid hasGutter>
-                        <GridItem md={2}>
-                            <Card>
-                                <CardTitle>Details</CardTitle>
-                                <CardBody>
-                                    <DescriptionList>
-                                        <DescriptionListGroup>
-                                            <DescriptionListTerm>Name</DescriptionListTerm>
-                                            <DescriptionListDescription>
-                                                {portfolio?.name ?? <Skeleton screenreaderText="Loading portfolio" />}
-                                            </DescriptionListDescription>
-                                        </DescriptionListGroup>
-                                        <DescriptionListGroup>
-                                            <DescriptionListTerm>Scenarios</DescriptionListTerm>
-                                            <DescriptionListDescription>
-                                                {portfolio?.scenarioIds.length ?? (
-                                                    <Skeleton screenreaderText="Loading portfolio" />
-                                                )}
-                                            </DescriptionListDescription>
-                                        </DescriptionListGroup>
-                                        <DescriptionListGroup>
-                                            <DescriptionListTerm>Metrics</DescriptionListTerm>
-                                            <DescriptionListDescription>
-                                                {portfolio?.targets?.enabledMetrics ? (
-                                                    portfolio.targets.enabledMetrics.length > 0 ? (
-                                                        <ChipGroup>
-                                                            {portfolio.targets.enabledMetrics.map((metric) => (
-                                                                <Chip isReadOnly key={metric}>
-                                                                    {METRIC_NAMES[metric]}
-                                                                </Chip>
-                                                            ))}
-                                                        </ChipGroup>
-                                                    ) : (
-                                                        'No metrics enabled'
-                                                    )
-                                                ) : (
-                                                    <Skeleton screenreaderText="Loading portfolio" />
-                                                )}
-                                            </DescriptionListDescription>
-                                        </DescriptionListGroup>
-                                        <DescriptionListGroup>
-                                            <DescriptionListTerm>Repeats per Scenario</DescriptionListTerm>
-                                            <DescriptionListDescription>
-                                                {portfolio?.targets?.repeatsPerScenario ?? (
-                                                    <Skeleton screenreaderText="Loading portfolio" />
-                                                )}
-                                            </DescriptionListDescription>
-                                        </DescriptionListGroup>
-                                    </DescriptionList>
-                                </CardBody>
-                            </Card>
-                        </GridItem>
-                        <GridItem md={6}>
-                            <Card>
-                                <CardHeader>
-                                    <CardActions>
-                                        <NewScenario portfolioId={portfolioId} />
-                                    </CardActions>
-                                    <CardTitle>Scenarios</CardTitle>
-                                </CardHeader>
-                                <CardBody>
-                                    <ScenarioTable portfolioId={portfolioId} />
-                                </CardBody>
-                            </Card>
-                        </GridItem>
-                    </Grid>
+                    <PortfolioOverview portfolioId={portfolioId} />
                 </TabContent>
                 <TabContent eventKey={1} id="results" ref={resultsRef} aria-label="Results tab" hidden>
                     <PortfolioResults portfolioId={portfolioId} />
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
index a1d6ac7e..f95b18ed 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
@@ -21,39 +21,28 @@
  */
 
 import { useRouter } from 'next/router'
+import TopologyOverview from '../../../../components/topologies/TopologyOverview'
 import { useProject } from '../../../../data/project'
-import { useDispatch, useSelector } from 'react-redux'
+import { useDispatch } from 'react-redux'
 import React, { useEffect, useRef, useState } from 'react'
-import { configure, HotKeys } from 'react-hotkeys'
-import { KeymapConfiguration } from '../../../../hotkeys'
 import Head from 'next/head'
 import { openProjectSucceeded } from '../../../../redux/actions/projects'
 import { AppPage } from '../../../../components/AppPage'
 import {
     Breadcrumb,
     BreadcrumbItem,
-    Bullseye,
     Divider,
-    Drawer,
-    DrawerContent,
-    DrawerContentBody,
-    EmptyState,
-    EmptyStateIcon,
     PageSection,
     PageSectionVariants,
-    Spinner,
     Tab,
     TabContent,
     Tabs,
     TabTitleText,
     Text,
     TextContent,
-    Title,
 } from '@patternfly/react-core'
 import BreadcrumbLink from '../../../../components/util/BreadcrumbLink'
-import MapStage from '../../../../components/topologies/map/MapStage'
-import Collapse from '../../../../components/topologies/map/controls/Collapse'
-import TopologySidebar from '../../../../components/topologies/sidebar/TopologySidebar'
+import TopologyMap from '../../../../components/topologies/TopologyMap'
 
 /**
  * Page that displays a datacenter topology.
@@ -75,11 +64,6 @@ function Topology() {
     const overviewRef = useRef(null)
     const floorPlanRef = useRef(null)
 
-    const topologyIsLoading = useSelector((state) => state.currentTopologyId === '-1')
-    const interactionLevel = useSelector((state) => state.interactionLevel)
-
-    const [isExpanded, setExpanded] = useState(true)
-
     const breadcrumb = (
         <Breadcrumb>
             <BreadcrumbItem to="/projects" component={BreadcrumbLink}>
@@ -94,13 +78,6 @@ function Topology() {
         </Breadcrumb>
     )
 
-    const panelContent = <TopologySidebar interactionLevel={interactionLevel} onClose={() => setExpanded(false)} />
-
-    // Make sure that holding down a key will generate repeated events
-    configure({
-        ignoreRepeatedEventsWhenKeyHeldDown: false,
-    })
-
     return (
         <AppPage breadcrumb={breadcrumb}>
             <Head>
@@ -134,7 +111,7 @@ function Topology() {
             </PageSection>
             <PageSection padding={activeTab === 'floor-plan' && { default: 'noPadding' }} isFilled>
                 <TabContent eventKey="overview" id="overview" ref={overviewRef} aria-label="Overview tab">
-                    Test
+                    <TopologyOverview topologyId={topologyId} />
                 </TabContent>
                 <TabContent
                     eventKey="floor-plan"
@@ -144,27 +121,7 @@ function Topology() {
                     className="pf-u-h-100"
                     hidden
                 >
-                    {topologyIsLoading ? (
-                        <Bullseye>
-                            <EmptyState>
-                                <EmptyStateIcon variant="container" component={Spinner} />
-                                <Title size="lg" headingLevel="h4">
-                                    Loading Topology
-                                </Title>
-                            </EmptyState>
-                        </Bullseye>
-                    ) : (
-                        <HotKeys keyMap={KeymapConfiguration} allowChanges={true} className="full-height">
-                            <Drawer isExpanded={isExpanded}>
-                                <DrawerContent panelContent={panelContent}>
-                                    <DrawerContentBody>
-                                        <MapStage />
-                                        <Collapse onClick={() => setExpanded(true)} />
-                                    </DrawerContentBody>
-                                </DrawerContent>
-                            </Drawer>
-                        </HotKeys>
-                    )}
+                    <TopologyMap />
                 </TabContent>
             </PageSection>
         </AppPage>
-- 
cgit v1.2.3